<style>
    .layui-input-block-my {
        display: block;
        width: 170px;
        padding-left: 10px;
        height: 36px;
        line-height: 36px;
        border-width: 1px;
        border-style: solid;
        background-color: #fff;
        border-radius: 2px;
        border-color: #e6e6e6;
    }

    .hide {
        display: none;
    }
</style>

<title>订单管理</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a><cite>调度管理</cite></a>
        <a><cite>订单管理</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form" lay-filter="content-order" id="content-order">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="bizType">
                                <option value="">全部业务类型</option>
                                <option value="0">出行</option>
                                <option value="1">速运</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="type">
                                <option value="">全部约车类型</option>
                                <option value="0">拼车</option>
                                <option value="1">包车</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="process">
                                <option value="">全部状态</option>
                                <option value="0">未受理</option>
                                <option value="1">已受理</option>
                                <option value="2">已派车</option>
                                <option value="3">接送中</option>
                                <option value="4">已完成</option>
                                <option value="5">已取消</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" id="start" class="layui-input" name="start" placeholder="出发范围开始"
                                   readonly>
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" id="end" class="layui-input" name="end" placeholder="出发范围结束" readonly>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" id="phone" class="layui-input" name="phone" placeholder="联系人电话">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="hidden" id="userId" name="userId" placeholder="请选择用户" autocomplete="off"
                                   class="layui-input">
                            <div id="userTag">
                                <input placeholder="请选择用户" id="userNameInput" autocomplete="off"
                                       class="layui-input userName">
                                <span class='userName hide'></span><span id="closeUser" class='hide'><i
                                    class='layui-icon layui-icon-close'></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="hidden" id="driverId" name="driverId" placeholder="请选择司机" autocomplete="off"
                                   class="layui-input">
                            <div id="driverTag">
                                <input placeholder="请选择司机" id="driverNameInput" autocomplete="off"
                                       class="layui-input driverName">
                                <span class='driverName hide'></span><span id="closeDriver" class='hide'><i
                                    class='layui-icon layui-icon-close'></i></span>
                            </div>
                        </div>
                    </div>


                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" id="place" class="layui-input" name="place" placeholder="地址模糊查询">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="LAY-order-search">
                            搜索
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="LAY-order" lay-filter="LAY-order"></table>
            <script type="text/html" id="typeTpl">
                {{#  if(d.type == '0'){ }}
                <span class="">拼车</span>
                {{#  } else if(d.type == '1'){ }}
                <span style="color: #CF1900">包车</span>
                {{#  } }}
            </script>
            <script type="text/html" id="bizTypeTpl">
                {{#  if(d.bizType == '0'){ }}
                <span>出行</span>
                {{#  } else if(d.bizType == '1'){ }}
                <span>速运</span>
                {{#  } }}
            </script>
            <script type="text/html" id="buttonTpl">
                {{#  if(d.process == '0'){ }}
                <span class="layui-btn layui-btn-normal layui-btn-xs">未受理</span>
                {{#  } else if(d.process == '1'){ }}
                <span class="layui-btn layui-btn-primary layui-btn-xs">已受理</span>
                {{#  } else if(d.process == '2'){ }}
                <span class="layui-btn layui-btn-normal layui-btn-xs">已派车</span>
                {{#  } else if(d.process == '3'){ }}
                <span class="layui-btn layui-btn-primary layui-btn-xs">接送中</span>
                {{#  } else if(d.process == '4'){ }}
                <span class="layui-btn layui-btn-primary layui-btn-xs">已完成</span>
                {{#  } else if(d.process == '5'){ }}
                <span class="layui-btn layui-btn-primary layui-btn-xs">已取消</span>
                {{#  } else{ }}
                <span class="layui-btn layui-btn-warm layui-btn-xs">未知状态</span>
                {{#  } }}
            </script>
            <script type="text/html" id="table-system-order">
                {{#  if(d.process == '0'){ }}
                <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="send">
                    <i class="layui-icon layui-icon-ok"></i>派车
                </a>
                {{#  } }}
                {{#  if(d.process == '1'){ }}
                <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="send">
                    <i class="layui-icon layui-icon-ok"></i>重派
                </a>
                {{#  } }}
                {{#  if(d.process != '4' && d.process != '5'){ }}
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="cancel">
                    <i class="layui-icon layui-icon-close"></i>取消
                </a>
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
                    <i class="layui-icon layui-icon-edit"></i>编辑
                </a>
                {{#  } }}
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">
                    <i class="layui-icon layui-icon-about"></i>详情
                </a>
            </script>
        </div>
    </div>
</div>
<script type="text/html" id="chooseUser">
    <div class="layui-card">
        <div class="layui-card-body">
            <form id="chooseUserForm" lay-filter="chooseUserForm" class="layui-form model-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="account" placeholder="请输入用户名称" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="mobile" placeholder="请输入手机号" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit
                                lay-filter="LAY-car-user-choose-search">
                            搜索
                        </button>
                    </div>
                    <div class="layui-inline">
                        <input type="button" lay-submit lay-filter="LAY-car-choose-user-confirm" value="确定"
                               class="layui-btn layui-btn">
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-card-body">
            <table id="LAY-car-user-choose-table" lay-filter="LAY-car-user-choose-table"></table>
        </div>
    </div>
</script>
<script type="text/html" id="chooseDriver">
    <div class="layui-card">
        <div class="layui-card-body">
            <form id="chooseDriverForm" lay-filter="chooseDriverForm" class="layui-form model-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="name" placeholder="请输入司机姓名" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="mobile" placeholder="请输入手机号" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit
                                lay-filter="LAY-car-driver-choose-search">
                            搜索
                        </button>
                    </div>
                    <div class="layui-inline">
                        <input type="button" lay-submit lay-filter="LAY-car-choose-driver-confirm" value="确定"
                               class="layui-btn layui-btn">
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-card-body">
            <table id="LAY-car-driver-choose-table" lay-filter="LAY-car-driver-choose-table"></table>
        </div>
    </div>
</script>
<script>
    layui.use(['admin', 'table', 'form', 'setter', 'element', 'laydate'], function () {
        var $ = layui.$
            , admin = layui.admin
            , view = layui.view
            , table = layui.table
            , form = layui.form
            , element = layui.element
            , laydate = layui.laydate
            , setter = layui.setter;

        var apiUrl = setter.apiUrl;

        laydate.render({
            elem: '#start'
            , type: 'datetime'
        });
        laydate.render({
            elem: '#end'
            , type: 'datetime'
        });

        table.render({
            elem: '#LAY-order'
            , url: apiUrl + '/mapi/order/list'
            , method: 'post'
            , page: true
            , contentType: 'application/json'
            , headers: {'token': layui.data(setter.tableName).token}
            , request: {
                pageName: 'pageNo'
                , limitName: 'pageSize'
            }
            , response: {
                statusCode: 0,
            }
            , parseData: function (res) {
                if (res.code === 0) {
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.data.total,
                        "data": res.data.list
                    };
                } else {
                    return {
                        "code": res.code,
                        "msg": res.msg,
                    };
                }
            }
            , cols: [[
                {field: 'type', width: 60, title: '类型', align: 'center', templet: '#typeTpl'}
                , {field: 'bizType', width: 80, title: '人/货', templet: '#bizTypeTpl', align: 'center'}
                , {field: 'lineName', width: 100, title: '线路'}
                , {field: 'startPlace', minWidth: 100, title: '出发地'}
                , {field: 'endPlace', minWidth: 100, title: '目的地'}
                , {field: 'datetime', width: 110, title: '出发时间'}
                , {field: 'number', width: 60, title: '人数'}
                , {field: 'phone', width: 120, title: '手机号'}
                , {field: 'driver', minWidth: 100, title: '司机', templet: '<div>{{d.driver?d.driver.name:""}}</div>'}
                , {field: 'process', width: 80, title: '状态', templet: '#buttonTpl', align: 'center'}
                , {title: '操作', minWidth: 300, fixed: 'right', toolbar: '#table-system-order'}
            ]]
            , text: {
                none: '未检索到数据'
            }
            , done: function () {
                element.render('progress');
            }
        });

        //监听工具条
        table.on('tool(LAY-order)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                admin.popup({
                    title: '订单详情'
                    , id: 'LAY-popup-car-order-detail'
                    , area: ['100%', '100%']
                    , success: function (layero, index) {
                        view(this.id).render('car/order/detail', data);
                    }
                });
            } else if (obj.event === 'send') {
                admin.popup({
                    title: '订单派车'
                    , id: 'LAY-popup-car-order-send'
                    , area: ['100%', '100%']
                    , success: function (layero, index) {
                        view(this.id).render('car/order/send', data);
                    }
                });
            } else if (obj.event === 'cancel') {
                top.layer.confirm('确定取消订单吗？', {
                        skin: 'layui-layer-admin'
                    }, function (index) {
                        top.layer.close(index);
                        admin.req({
                            url: apiUrl + '/mapi/order/cancel/' + data.id
                            , method: 'get'
                            , done: function (response) {
                                if (response.code === 0) {
                                    layer.msg('操作成功', {
                                        offset: '15px', icon: 1, time: 1000
                                    }, function () {
                                        layui.table.reload('LAY-order'); //重载表格
                                    });
                                } else {
                                    layer.msg(response.msg, {
                                        offset: '15px', icon: 2
                                    });
                                }
                            }
                        });
                    }
                );
            } else if (obj.event === 'edit') {
                admin.popup({
                    title: '编辑订单'
                    , id: 'LAY-popup-car-order-edit'
                    , area: ['400px', '300px']
                    , success: function (layero, index) {
                        view(this.id).render('car/order/edit', data).done(function () {
                            var oid = data.id;
                            form.render(null, 'form-order');
                            //监听提交
                            form.on('submit(LAY-order-edit-submit)', function (data) {
                                //提交 Ajax 成功后，关闭当前弹层并重载表格
                                admin.req({
                                    url: apiUrl + '/mapi/order/update/' + oid
                                    , method: 'put'
                                    , data: JSON.stringify(data.field)
                                    , done: function (response) {
                                        if (response.code === 0) {
                                            layer.msg('修改成功', {
                                                offset: '15px', icon: 1, time: 1000
                                            }, function () {
                                                layui.table.reload('LAY-order'); //重载表格
                                                layer.close(index); //执行关闭
                                            });
                                        } else {
                                            layer.msg(response.msg, {
                                                offset: '15px', icon: 2
                                            });
                                        }
                                    }
                                });
                            });
                        });
                    }
                });
            }
        });

        form.render(null, 'content-order');

        $('#closeUser').on('click', function () {
            $('.nameInfo').html('<span style="color: #e6e6e6;">请选择用户<span>');
            $('#userId').val('');
            $('#closeUser').addClass('hide');
        });

        $('#closeDriver').on('click', function () {
            $('.nameInfo').html('<span style="color: #e6e6e6;">请选择司机<span>');
            $('#driverId').val('');
            $('#closeDriver').addClass('hide');
        });


        $('.driverName').on('click', function () {
            admin.popup({
                title: '选择司机'
                , area: ['50%', '100%']
                , id: 'LAY-popup-driver-choose'
                , content: $('#chooseDriver').html()
                , success: function (layero, index) {
                    //driver列表
                    table.render({
                        elem: '#LAY-car-driver-choose-table'
                        , url: apiUrl + '/mapi/driver/list'
                        , method: 'post'
                        , page: true
                        , contentType: 'application/json'
                        , headers: {'token': layui.data(setter.tableName).token}
                        , request: {
                            pageName: 'pageNo'
                            , limitName: 'pageSize'
                        }
                        , response: {
                            statusCode: 0,
                        }
                        , parseData: function (res) {
                            if (res.code === 0) {
                                return {
                                    "code": res.code,
                                    "msg": res.msg,
                                    "count": res.data.total,
                                    "data": res.data.list
                                };
                            } else {
                                return {
                                    "code": res.code,
                                    "msg": res.msg,
                                };
                            }
                        }
                        , cols: [[
                            {type: 'radio'}
                            , {field: 'id', title: 'id', width: 60}
                            , {field: 'name', title: '姓名'}
                            , {field: 'mobile', title: '手机'}
                        ]]
                        , text: {
                            none: '未检索到数据'
                        }
                    });
                    form.on('submit(LAY-car-driver-choose-search)', function (data) {
                        var field = data.field;
                        //执行重载
                        table.reload('LAY-car-driver-choose-table', {
                            where: field
                        });
                        return false;
                    });
                    // 选择
                    form.on('submit(LAY-car-choose-driver-confirm)', function () {
                        var checkStatus = table.checkStatus('LAY-car-driver-choose-table')
                            , data = checkStatus.data; //获得选中的数据
                        if (data.length === 0) return layer.msg('请选择司机');
                        var driver = data[0];
                        $('#driverNameInput').attr('type', 'hidden');
                        $('#driverId').val(driver.id);
                        $('#closeDriver').removeClass('hide');
                        $('.driverName').removeClass('hide');
                        $('.driverName').html("<span class='layui-input-block-my nameInfo'>" + driver.name + "</span>");
                        layer.close(index);
                    });
                }
            });
        });


        $('.userName').on('click', function () {
            admin.popup({
                title: '选择用户'
                , area: ['50%', '100%']
                , id: 'LAY-popup-user-choose'
                , content: $('#chooseUser').html()
                , success: function (layero, index) {
                    //user列表
                    table.render({
                        elem: '#LAY-car-user-choose-table'
                        , url: apiUrl + '/mapi/user/list'
                        , method: 'post'
                        , page: true
                        , contentType: 'application/json'
                        , headers: {'token': layui.data(setter.tableName).token}
                        , request: {
                            pageName: 'pageNo'
                            , limitName: 'pageSize'
                        }
                        , response: {
                            statusCode: 0,
                        }
                        , parseData: function (res) {
                            if (res.code === 0) {
                                return {
                                    "code": res.code,
                                    "msg": res.msg,
                                    "count": res.data.total,
                                    "data": res.data.list
                                };
                            } else {
                                return {
                                    "code": res.code,
                                    "msg": res.msg,
                                };
                            }
                        }
                        , cols: [[
                            {type: 'radio'}
                            , {field: 'id', title: 'id', width: 60}
                            , {field: 'account', title: '账号'}
                            , {field: 'mobile', title: '手机'}
                            , {field: 'userInfo', title: '姓名', templet: '<div>{{d.userInfo.realName}}</div>'}
                            , {field: 'nickname', title: '昵称'}
                        ]]
                        , text: {
                            none: '未检索到数据'
                        }
                    });

                    // 搜索
                    form.on('submit(LAY-car-user-choose-search)', function (data) {
                        var field = data.field;
                        //执行重载
                        table.reload('LAY-car-user-choose-table', {
                            where: field
                        });
                        return false;
                    });
                    // 选择
                    form.on('submit(LAY-car-choose-user-confirm)', function () {
                        var checkStatus = table.checkStatus('LAY-car-user-choose-table')
                            , data = checkStatus.data; //获得选中的数据
                        if (data.length === 0) return layer.msg('请选择用户');
                        var user = data[0];
                        $('#userNameInput').attr('type', 'hidden');
                        $('#userId').val(user.id);
                        $('#closeUser').removeClass('hide');
                        $('.userName').removeClass('hide');
                        $('.userName').html("<span class='layui-input-block-my nameInfo'>" + user.account + "</span>");
                        layer.close(index);
                    });
                }
            });
        });


        //监听搜索
        form.on('submit(LAY-order-search)', function (data) {
            var field = data.field;
            //执行重载
            table.reload('LAY-order', {
                where: field
            });
        });
    });
</script>